<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layouts/layout-manager}">
<head>
    <title>Couriers</title>
</head>
<body>

<div layout:fragment="content">
    <section class="my-5">
        <div class="container">
            <div class="row alert alert-warning alert-dismissible fade show">
                <div class="col-6">
                    <div class="bg-white alert alert-dismissible fade show">
                        <img class="img-fluid" th:src="@{img/1.jpg}"
                             alt="event model of courier management context"/>
                    </div>
                </div>
                <div class="col-6">
                    <p class="text-muted"><b>Command side</b>: Given no previous events, when `CreateCourier` command
                        is handled, new event `CourierCreated` is published by the command side component.</p>
                    <p class="text-muted"><b>Query side</b>: Given the event `CourierCreated` a `courier` view is
                        eventually materialized and refreshed by the query side component.</p>
                </div>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="row mt-1">
                <div class="col-12">
                    <div class="card">
                        <h3 class="card-header alert alert-primary">Create Courier</h3>
                        <form class="card-body" th:action="@{/couriers}" th:object="${createCourierRequest}"
                              method="post">
                            <div class="form-group">
                                <label for="firstName">First Name</label>
                                <input type="text" th:field="*{firstName}" id="firstName" placeholder="First Name"
                                       class="form-control"/>
                                <small th:if="${#fields.hasErrors('firstName')}" th:errors="*{firstName}"
                                       class="text-danger">First Name
                                    Error</small>

                                <label for="lastName">Last Name</label>
                                <input type="text" th:field="*{lastName}" id="lastName" placeholder="Last Name"
                                       class="form-control"/>
                                <small th:if="${#fields.hasErrors('lastName')}" th:errors="*{lastName}"
                                       class="text-danger">Last Name
                                    Error</small>

                                <label for="maxNumberOfActiveOrders">Max Number Of Active Orders</label>
                                <input type="text" th:field="*{maxNumberOfActiveOrders}" id="maxNumberOfActiveOrders"
                                       placeholder="Max Number Of Active Orders"
                                       class="form-control"/>
                                <small th:if="${#fields.hasErrors('maxNumberOfActiveOrders')}"
                                       th:errors="*{maxNumberOfActiveOrders}" class="text-danger">Max Number Of Active
                                    Orders
                                    Error</small>
                            </div>

                            <input data-toggle="tooltip" data-placement="top"
                                   title="Creates the courier" type="submit" value="Create"
                                   class="btn btn-primary"/>
                        </form>
                    </div>
                </div>

            </div>
            <div class="row mt-1">
                <div class="col-12">
                    <div class="card">
                        <h3 class="card-header alert alert-success">Couriers</h3>
                        <table class="table table-striped card-body">
                            <thead>
                            <tr>
                                <th>Id</th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Max Number Of Active Orders</th>
                            </tr>
                            </thead>
                            <tbody id="couriersTable">


                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>

    </section>

    <script>

        const couriersTable = document.getElementById("couriersTable");

        const couriers_source = new EventSource("/couriers-sse");
        couriers_source.withCredentials = true;
        couriers_source.addEventListener("message", function (event) {
            couriersTable.innerHTML = event.data + couriersTable.innerHTML;

            //remove the duplicates (naive ;))
            let arr = $("#couriersTable tr");
            $.each(arr, function (i, item) {
                let currIndex = $("#couriersTable tr").eq(i);
                let matchText = currIndex.children("td").first().text();
                $(this).nextAll().each(function (i, inItem) {
                    if (matchText === $(this).children("td").first().text()) {
                        $(this).remove();
                    }
                });
            });
        });


    </script>
</div>

